<template>
  <div class="dialog-box">
    <div class="box-content" style="width: 30%">
      <div class="content-header">
        <span>选择替换的瓦片</span>
        <i class="el-icon-close" style="font-size: 16px" @click="$parent.updateShow = false"></i>
      </div>
      <div class="content-body">
        <div class="form-item-box" style="border:none">
          <el-button type="primary" @click="openDirectory">选择瓦片</el-button>
          <p v-if="updateDirectory.length > 0" style="color:#fff;margin:10px 0">已选瓦片</p>
          <wp-scrollbar :maxHeight="200" scrollbarColor="rgba(255,255,255,0.5)">
            <el-descriptions :column="1" border>
              <el-descriptions-item v-for="item in updateDirectory" :key="item" :label="item"
                                    content-class-name="tiles-list-content" label-class-name="tiles-list-label">
                <i class="el-icon-circle-close" style="cursor:pointer" @click="deleteDir(item)"></i>
              </el-descriptions-item>
            </el-descriptions>
          </wp-scrollbar>
          <div style="text-align: right;margin-top: 10px">
            <el-button type="primary" @click="setTiles">确定</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const {ipcRenderer} = window.require("electron");
const path = window.require("path");
export default {
  props: {
    osgbConfig: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      updateDirectory: []
    };
  },
  methods: {
    // 删除已选瓦片
    deleteDir(name) {
      this.updateDirectory = this.updateDirectory.filter(item => item !== name)
    },
    // 打开文件夹选择瓦片文件夹
    openDirectory() {
      const option = {
        title: `选择瓦片文件夹`,
        properties: ['openDirectory', 'multiSelections']
      }
      ipcRenderer.send("open-directory-dialog", option)
      ipcRenderer.once("open-directory-dialog", (event, data) => {
        this.updateDirectory = [...this.updateDirectory, ...data.folderPath]
      })
    },
    // 确定
    setTiles() {
      if (!this.checkTiles()) {
        this.$message.error("所选瓦片不在目标地址内")
        return
      }

      this.$emit("setTiles", this.updateDirectory)
    },
    // 判断所选瓦片所在数据源是否在目标数据源内
    checkTiles() {
      const {osgInput} = this.osgbConfig
      let targetPaths = []
      let flag = true
      for (let i in osgInput) {
        targetPaths.push(osgInput[i].path)
      }
      this.updateDirectory.forEach(item => {
        const basePath = path.resolve(item, '../')
        if (!targetPaths.includes(basePath)) {
          flag = false
        }
      })
      return flag
    }
  },
  created() {
  },
  mounted() {
  }
};
</script>
<style lang="less">
.el-descriptions__body {
  background-color: rgba(0, 0, 0, 0);
}

.tiles-list-label {
  color: #fff !important;
  background: rgba(0, 0, 0, 0) !important;
  border-color: #3d507b !important
}

.tiles-list-content {
  color: #fff !important;
  background: rgba(0, 0, 0, 0) !important;
  border-color: #3d507b !important
}
</style>